<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="basepath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
<title>zmall网上商城</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Sublime project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
	href="${basepath}/efront/UserStyle/styles/bootstrap4/bootstrap.min.css">
<link
	href="${basepath}/efront/UserStyle/plugins/font-awesome-4.7.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="${basepath}/efront/UserStyle/styles/cart.css">
<link rel="stylesheet" type="text/css"
	href="${basepath}/efront/UserStyle/styles/cart_responsive.css">
</head>
<body>
	<c:if test="${sessionScope.user==null }">
		<c:redirect url="UserLogin.jsp"></c:redirect>
	</c:if>
	<div class="super_container">

		<!-- Header -->

		<header class="header">
			<div class="header_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="header_content d-flex flex-row align-items-center justify-content-start">
								<div class="logo">
									<a href="#">zmall网上商城</a>
								</div>
								<nav class="main_nav">
									<ul>
										<li><a href="${basepath}/efront/UserIndex.jsp">商城首页</a></li>
										<li><a href="${basepath}/efront/Categories.jsp">更多商品</a></li>
										<li><a href="${basepath}/efront/UserIndex.jsp">商家入驻</a></li>
										<li><a href="#">个人中心</a></li>
									</ul>
								</nav>
								<div class="header_extra ml-auto">
									<div class="shopping_cart">
										<a href="Cart.jsp"> <svg version="1.1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 489 489"
												style="enable-background: new 0 0 489 489;"
												xml:space="preserve">
											<g>
												<path
													d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
													c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
													C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
													H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
													c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z" />
											</g>
										</svg>
											<div>
												<a href="${basepath}/efront/Cart.jsp">购物车</a>
											</div>
										</a>
									</div>
									<div class="search">
										<div class="search_icon">
											<svg version="1.1" id="Capa_1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 475.084 475.084"
												style="enable-background: new 0 0 475.084 475.084;"
												xml:space="preserve">
										<g>
											<path
													d="M464.524,412.846l-97.929-97.925c23.6-34.068,35.406-72.047,35.406-113.917c0-27.218-5.284-53.249-15.852-78.087
												c-10.561-24.842-24.838-46.254-42.825-64.241c-17.987-17.987-39.396-32.264-64.233-42.826
												C254.246,5.285,228.217,0.003,200.999,0.003c-27.216,0-53.247,5.282-78.085,15.847C98.072,26.412,76.66,40.689,58.673,58.676
												c-17.989,17.987-32.264,39.403-42.827,64.241C5.282,147.758,0,173.786,0,201.004c0,27.216,5.282,53.238,15.846,78.083
												c10.562,24.838,24.838,46.247,42.827,64.234c17.987,17.993,39.403,32.264,64.241,42.832c24.841,10.563,50.869,15.844,78.085,15.844
												c41.879,0,79.852-11.807,113.922-35.405l97.929,97.641c6.852,7.231,15.406,10.849,25.693,10.849
												c9.897,0,18.467-3.617,25.694-10.849c7.23-7.23,10.848-15.796,10.848-25.693C475.088,428.458,471.567,419.889,464.524,412.846z
												 M291.363,291.358c-25.029,25.033-55.148,37.549-90.364,37.549c-35.21,0-65.329-12.519-90.36-37.549
												c-25.031-25.029-37.546-55.144-37.546-90.36c0-35.21,12.518-65.334,37.546-90.36c25.026-25.032,55.15-37.546,90.36-37.546
												c35.212,0,65.331,12.519,90.364,37.546c25.033,25.026,37.548,55.15,37.548,90.36C328.911,236.214,316.392,266.329,291.363,291.358z
												" />
										</g>
									</svg>
										</div>
									</div>
									<div class="hamburger">
										<i class="fa fa-bars" aria-hidden="true"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Search Panel -->
			<div class="search_panel trans_300">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="search_panel_content d-flex flex-row align-items-center justify-content-end">
								<form action="#">
									<input type="text" class="search_input" placeholder="Search"
										required="required">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Social -->
			<div class="header_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</header>

		<!-- Menu -->

		<div class="menu menu_mm trans_300">
			<div class="menu_container menu_mm">
				<div class="page_menu_content">

					<div class="page_menu_search menu_mm">
						<form action="#">
							<input type="search" required="required"
								class="page_menu_search_input menu_mm"
								placeholder="Search for products...">
						</form>
					</div>
					<ul class="page_menu_nav menu_mm">
						<li class="page_menu_item has-children menu_mm"><a
							href="${basepath}/UserIndexServlet?op=showByPage">商城首页</a></li>
						<li class="page_menu_item has-children menu_mm"><a
							href="{basepath}/efront/Categories.jsp">商品分类</a></li>
						<li class="page_menu_item menu_mm"><a href="UserIndex.jsp">商家入驻<i
								class="fa fa-angle-down"></i></a></li>
						<li class="page_menu_item menu_mm"><a href="{basepath}/efront/personal.jsp">个人中心<i
								class="fa fa-angle-down"></i></a></li>
					</ul>
				</div>
			</div>

			<div class="menu_close">
				<i class="fa fa-times" aria-hidden="true"></i>
			</div>

			<div class="menu_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</div>

		<!-- Home -->

		<div class="home">
			<div class="home_container">
				<div class="home_background"
					style="background-image: url(${basepath}/efront/UserStyle/images/cart.jpg)"></div>
				<div class="home_content_container">
					<div class="container">
						<div class="row">
							<div class="col">
								<div class="home_content">
									<div class="breadcrumbs">
										<ul>
											<li><a href="${basepath}/efront/UserIndex.jsp">首页</a></li>
											<li>购物车</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Cart Info -->

		<div class="cart_info" style="padding-bottom: 30px;">
			<div class="container">
				<div class="row">
					<div class="col">
						<!-- Column Titles -->
						<div class="cart_info_columns clearfix">
							<div class="cart_info_col cart_info_col_price">
								<input type="checkbox" name="s_goods" id="s_goods">全选
							</div>
							<div class="cart_info_col cart_info_col_product"
								style="width: 600px;">产品</div>
							<div class="cart_info_col cart_info_col_quantity">总数量</div>
							<div class="cart_info_col cart_info_col_total">总金额</div>
						</div>
					</div>
				</div>

				<div class="row cart_items_row">
					<div class="col">

						<c:if test="${pd==null}">
							<!-- c:redirect 跳转到 UserIndexService -->

							<c:redirect url="../scs.do?op=showMyCar"></c:redirect>
						</c:if>
						<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
						<c:if test="${pd!=null}">
							<c:forEach items="${pd.list}" var="shopcar">
								<!-- Cart Item -->
								<div
									class="cart_item d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
									<!-- Name -->
									<div
										class="cart_item_product d-flex flex-row align-items-center justify-content-start">
										<div class="product_quantity_container" style="width: 75px">
											<input type="checkbox" class="cksgoods"
												value="${shopcar.goodsid}">
												<!-- shopcid 购物车表中购物车编号，隐藏域 -->
												<input type="hidden" class="shopcid" value="${shopcar.shopcid}">
										</div>
										<div class="cart_item_name_container">
											<div class="cart_item_name">
												<a href="#" class="shopcargoodsname">${shopcar.goodsname}</a>
											</div>
											<div class="cart_item_edit">
												<input type="hidden" class="shopid" value="${shopcar.shopid}">
											</div>
										</div>
										
										
									</div>
									<!-- Price -->

									<!-- Quantity -->
									<div class="cart_item_quantity">
										<div class="product_quantity_container">
											<div class="product_quantity clearfix">
												<span>数量</span> <input id="quantity_input"
													class="quantity_input" type="text" pattern="[0-9]*"
													value="${shopcar.shopccount}">
												<div class="quantity_buttons">
													<div id="quantity_inc_button"
														class="quantity_inc quantity_control quantity_inc_button">
														<i class="fa fa-chevron-up" aria-hidden="true"></i>
													</div>
													<div id="quantity_dec_button"
														class="quantity_dec quantity_control quantity_dec_button">
														<i class="fa fa-chevron-down" aria-hidden="true"></i>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- Total -->
									<div class="cart_item_total">${shopcar.total}</div>
								</div>
							</c:forEach>
						</c:if>
					</div>
				</div>
				<div class="row row_cart_buttons">
					<div class="col">
						<div
							class="cart_buttons d-flex flex-lg-row flex-column align-items-start justify-content-start">
							<div class="button continue_shopping_button">
								<a href="${basepath}/efront/UserIndex.jsp">继续购物</a>
							</div>
							<div class="cart_buttons_right ml-lg-auto">

								<div class="button update_cart_button">
									<%-- ${basepath}/efront/order.jsp --%>
									<a href="#" id="btnorder">现在去结算</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Footer -->

		<div class="footer_overlay"></div>
		<footer class="footer">
			<div class="footer_background"
				style="background-image: url(${basepath}/efront/UserStyle/images/footer.jpg)"></div>
			<div class="container">
				<div class="row">
					<div class="col">
						<div
							class="footer_content d-flex flex-lg-row flex-column align-items-center justify-content-lg-start justify-content-center">
							<div class="footer_logo">
								<a href="#">zmall网上商城</a>
							</div>
							<div class="copyright ml-auto mr-auto">
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
								版权 &copy;
								<script>
									document.write(new Date().getFullYear());
								</script>
								由zmall网上商城开发者所有<i class="fa fa-heart-o" aria-hidden="true"></i>
								by zmall开发者 
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
							</div>
							<div class="footer_social ml-lg-auto">
								<ul>
									<li><a href="#"><i class="fa fa-pinterest"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-instagram"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-facebook"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"
											aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>

	<script src="${basepath}/efront/UserStyle/js/jquery-3.2.1.min.js"></script>
	<script src="${basepath}/efront/UserStyle/styles/bootstrap4/popper.js"></script>
	<script
		src="${basepath}/efront/UserStyle/styles/bootstrap4/bootstrap.min.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/greensock/TweenMax.min.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/greensock/TimelineMax.min.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/scrollmagic/ScrollMagic.min.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/greensock/animation.gsap.min.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/greensock/ScrollToPlugin.min.js"></script>
	<script src="${basepath}/efront/UserStyle/plugins/easing/easing.js"></script>
	<script
		src="${basepath}/efront/UserStyle/plugins/parallax-js-master/parallax.min.js"></script>
	<script src="${basepath}/efront/UserStyle/js/cart.js"></script>

	<script>
		//构造对象
		var cartobject = function(goodsid, goodsname, goodscount, total,shopid,shopcid) {
			this.goodsid = goodsid;
			this.goodscount = goodscount;
			this.goodsname = goodsname;
			this.total = total;
			this.shopid = shopid;
			this.shopcid= shopcid;
		}

		//btnorder(现在去结算的按钮)
		$(function() {
			//btnorder(现在去结算的按钮)
			$("#btnorder").click(

					function() {
						let array = new Array();
						//.cksgoods:checked 所有被选中的复选框
						$(".cksgoods:checked").each(
								function(index, item) {

									//console.log($(this).prop("checked"));
									//console.log($(this).parents("div.cart_item").children(".cart_item_total").text());
									//console.log($(this).parents("div.cart_item").find(".quantity_input").val());
									let goodsid = $(this).attr("value");
									let goodscount = $(this).parents(
											"div.cart_item").find(
											".quantity_input").val();
									let goodsname = $(this).parents(
											"div.cart_item").find(
											".shopcargoodsname").text();
									let total = $(this)
											.parents("div.cart_item").find(
													".cart_item_total").text();
									
									let shopid = $(this)
									.parents("div.cart_item").find(
											".shopid").val();
									
									
									let shopcid = $(this)
									.parents("div.cart_item").find(
											".shopcid").val();
									
									//quantity_input
									console.log("goodsid :" + goodsid);
									console.log("goodscount :" + goodscount);
									console.log("goodsname :" + goodsname);
									console.log("total :" + total);
									console.log("shopid :" + shopid);

									var obj = new cartobject(goodsid,
											goodsname, goodscount, total,shopid,shopcid);
									//将构造的购物车的对象添加到数组中
									array.push(obj);

								});

						//
						$.ajax({
							//url type data success error
							url : 'ajaxorder.do',
							type : 'post',
							traditional : true,//如果需要传入数组，一定将此值赋值true！
							data : {
								'shopc' : JSON.stringify(array),
								'shopid:' : 1
							},
							success : function(res) {
								if (res.code == 0){
									//跳转到订单确认页面
									location.href = "efront/order.jsp";
								}
							}
						});

					});
		});
	</script>
</body>
</html>